/*
 * @Author: yangzonglong
 * @Date: 2021-03-05 11:20:41
 * @version: v1.0.0
 * @Descripttion: AdjustItem 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-27 11:29:33
 * @Auditor:
 */
import React from 'react';
import { memo, useCallback } from 'react';
import { Form, Select, Checkbox } from 'antd';

const Option = Select.Option;
const FormItem = Form.Item;

interface IProps {
  onChange(k: string, v: any): void;
  options?: any;
}

const selectData = [
  {
    value: '0px',
    label: '0px',
  },
  {
    value: '2px',
    label: '2px',
  },
  {
    value: '4px',
    label: '4px',
  },
  {
    value: '8px',
    label: '8px',
  },
  {
    value: '16px',
    label: '16px',
  },
  {
    value: '24px',
    label: '24px',
  },
  {
    value: '32px',
    label: '32px',
  },
];

const selectWidth = [
  {
    value: '25%',
    label: '25%',
  },
  {
    value: '50%',
    label: '50%',
  },
  {
    value: '75%',
    label: '75%',
  },
  {
    value: '100%',
    label: '100%',
  },
];
export default memo(({ options, onChange }: IProps) => {
  const _onChange = useCallback(
    (v, key) => {
      onChange('style', { ...options?.style, [key]: v });
    },
    [onChange, options]
  );

  return (
    <>
      <FormItem label="间距">
        <Select value={options?.style?.height} onChange={(v) => _onChange(v, 'height')}>
          {selectData.map((item) => (
            <Option value={item.value} key={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      </FormItem>
      <FormItem label="宽度">
        <Select value={options?.style?.width} onChange={(v) => _onChange(v, 'width')}>
          {selectWidth.map((item) => (
            <Option value={item.value} key={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      </FormItem>
      <div className='common-white-space' />
      <FormItem className='antd-form-item-row' label='折页打印'>
        <Checkbox
          onChange={e => {
            onChange('printPageFoldout', e.target.checked);
          }}
          checked={options.printPageFoldout} />
      </FormItem>
    </>
  );
});
